import React from "react";
import Classes from "./Meal.module.css"
import Counter  from "../UI/Counter/Counter";
const Meal = (props)=>{
    const {title,img,desc,price} = props.meal
    return(
        <div className={Classes.Meal}>
            <div className={Classes.ImgBox}>
                <img src={img} />
            </div>
            <div className={Classes.content}>
                <h2 className={Classes.title}>{title}</h2>
                <p className={Classes.desc}>{desc}</p>
                <div className={Classes.priceBox}>
                    <span className={Classes.price}>{price}</span>
                    <Counter meal={props.meal}/>
                </div>
            </div>
        </div>
    )
}
export default Meal